<template>
  <el-container>
    <el-header style="height: 100%">
      <div class="pd-10">
        <el-row :gutter="10">
          <el-col :span="4">
            <a href="#" class="showItemA">
              <div class="showItemText">
                <p>总商品数</p>
                <p>{{ ProductCount }}件</p>
              </div>
            </a>
          </el-col>
          <el-col :span="4">
            <a href="#" class="showItemA">
              <div class="showItemText">
                <p>在售商品</p>
                <p>{{ InSellingGoodsCount }}件</p>
              </div>
            </a>
          </el-col>
          <el-col :span="4">
            <a href="#" class="showItemA">
              <div class="showItemText">
                <p>缺货商品</p>
                <p>{{ ShortageOfGoodsCount }}件</p>
              </div>
            </a>
          </el-col>
          <el-col :span="4">
            <a href="#" class="showItemA">
              <div class="showItemText">
                <p>昨日上新</p>
                <p>{{ ProductCountYesterdayRegister }}件</p>
              </div>
            </a>
          </el-col>
        </el-row>
      </div>

      <div class="pd-10">
        <el-input style="width: 200px" suffix-icon="el-icon-edit" placeholder="请输入商品条形码"
                  v-model="productBar"></el-input>
        <el-input class="ml-5" style="width: 200px" suffix-icon="el-icon-edit" placeholder="请输入商品名称"
                  v-model="productName"></el-input>

        <el-select class="ml-5" filterable clearable v-model="productCategoryId" placeholder="商品类型">
          <el-option v-for="item in productCategoryList " :label="item.productCategoryName"
                     :value="item.productCategoryId"></el-option>
        </el-select>

        <el-button class="ml-5" icon="el-icon-search" type="primary" @click="load">搜索</el-button>
        <el-button class="ml-5" icon="el-icon-edit" type="warning" @click="reset">重置</el-button>
        <el-button class="ml-5" icon="el-icon-circle-plus-outline" type="primary" @click="insertProduct">新增商品
        </el-button>
      </div>
      <div class="pd-10" style="text-align: right;">
        <a class="sort" @click="sortClick('hot_index')">热门</a>
        <a class="sort" @click="sortClick('product_check_quantity')">浏览量</a>
        <a class="sort" @click="sortClick('repertory')">库存量</a>
        <a class="sort" @click="sortClick('sales_volume')">销量</a>
        <a class="sort" @click="sortClick('recommendation_index')">推荐</a>
      </div>
    </el-header>
    <el-main style="height: 560px;border-radius: 5px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
      <div>
        <el-row v-loading="loading">
          <el-col :span="6" v-for="(item, index) in productList" :key="index">
            <el-card style="margin: 10px" :body-style="{ padding: '0px' }">
              <img v-if="item.productCover != null" :src="$ysyApi+item.productCover" class="image">
              <img v-if="item.productCover == null" src="../../assets/imageNull.png" class="image">
              <div style="padding: 15px;">
                <span>{{ item.productName }}</span>
                <div class="bottom clearfix">
                  <time class="time">{{ item.updateDatetime ? item.updateDatetime : item.createDatetime }}</time>
                  <el-button v-if="item.productStatus==0" type="text" @click="goto(item.productBar)" class="button">详情
                  </el-button>
                  <el-button v-if="item.productStatus==1" type="text" @click="goto(item.productBar)" class="button">售罄
                  </el-button>
                  <el-button v-if="item.productStatus==2" type="text" @click="goto(item.productBar)" class="button">
                    已下架
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-main>

    <el-footer>
      <div class="pd-10">
        <!--          current-page: 当前的页码
                      page-size: 每页的个数
        -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[20 ,40, 80, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-footer>

  </el-container>
</template>

<script>
export default {
  name: "Product",
  data() {
    return {
      loginStatus: true,
      loading: true,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      productBar: '',
      productName: '',
      ProductCount: 0,
      InSellingGoodsCount: 0,
      ShortageOfGoodsCount: 0,
      ProductCountYesterdayRegister: 0,
      productCategoryId: '',
      productCategoryList: [],
      productList: [],
      sortType: '',
    };
  },
  created() {
    this.load()
    this.getProductCategoryAll()
    this.FindProductCount()
    this.FindInSellingGoodsCount()
    this.FindShortageOfGoodsCount()
    this.FindProductCountYesterdayRegister()
  },
  methods: {
    //修改每页的条数
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    //修改页码
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    //搜索重置
    reset() {
      this.productCategoryId = ""
      this.productBar = ""
      this.productName = ""
      this.sortType = ""
      this.load()
    },
    load() {
      this.loading = true
      this.$axios({
        url: this.$api.FindProductPage,
        method: 'get',
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          productBar: this.productBar,
          productName: this.productName,
          productCategoryId: this.productCategoryId,
          sortType: this.sortType
        }
      }).then(res => {
        this.total = res.data.total
        this.productList = res.data.records
        this.loading = false
      })
    },
    insertProduct() {
      this.$router.push({
        path: "product/insertProduct"
      })
    },
    getProductCategoryAll() {
      this.$axios({
        method: "get",
        url: this.$api.FindProductCategory,
      }).then(res => {

        this.productCategoryList = res.data

      })
    },
    FindProductCount() {
      this.$axios({
        url: this.$api.FindProductCount
      }).then(res => {
        this.ProductCount = res.data
      })
    },
    FindInSellingGoodsCount() {
      this.$axios({
        url: this.$api.FindInSellingGoodsCount
      }).then(res => {
        this.InSellingGoodsCount = res.data
      })
    },
    FindShortageOfGoodsCount() {
      this.$axios({
        url: this.$api.FindShortageOfGoodsCount
      }).then(res => {
        this.ShortageOfGoodsCount = res.data
      })
    },
    FindProductCountYesterdayRegister() {
      this.$axios({
        url: this.$api.FindProductCountYesterdayRegister
      }).then(res => {
        this.ProductCountYesterdayRegister = res.data
      })
    },
    sortClick(e) {
      this.sortType = e
      this.load()
    },
    goto(productBar) {
      this.$router.push({
        path: "product/productDetails",
        query: {
          productBar: productBar
        }
      })
    }
  }
}
</script>

<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.sort {
  text-decoration: none;
  color: #409eff;
  margin-left: 5px;
  cursor: pointer;
}
</style>